<template>
  <div class="list-box">
    <el-row class="list-row-head">
      <span class="list-title">ChatGPT-ChatMeOnly</span><br/>
      <span class="list-title-follow">Build you own AI assistant.</span>
    </el-row>
    <el-row class="list-row-card" v-for="n in 1" :key="n">
      <el-col class="chat-card" :span="24">
        <el-row>
          <el-col :span="8">
            <span class="card-title">新的聊天</span>
          </el-col>
        </el-row>
        <el-row class="card-info">
          <el-col :span="8">
            <span class="card-count">{{chatCout}} 条对话</span>
          </el-col>
          <el-col :span="16">
            <span class="card-time">{{time}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="bk-svg">
      <el-col :span="24">
        <img src="../assets/chatgpt.svg" alt="" width="100" height="100">
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chatIdList : [1],
      chatCout: 0,
      time : this.$moment(new Date()).format('YYYY-MM-DD hh:mm:ss')
    }
  },
  
}
</script>

<style scoped>
  .list-box {
    height: 100%;
    background-color: #e7f8ff;
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
    box-shadow: var(--el-box-shadow-light);
  }
  .list-row-head {
    padding-top: 30px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-right: 20px;
  }
  .list-row-card {
    margin-top:10px;
    min-height: 10%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .list-title {
    font-size: large;

  }
  .list-title-follow {
    font-size: small;
    text-align: left;
    font-weight: 300;
  }
  .chat-card {
    padding-top: 15px;
    background: white;
    border-radius: 1em;
  }
  .card-title{
    font-size: medium;
    font-weight: 600;
    text-align: left;
  }
  /* .card-count {
    font-size: medium;
    color: gray;
    display: flex;
    margin-top: 20px;
    justify-content: center;
  }
  .card-time {
    font-size: medium;
    color: gray;
    display: flex;
    margin-top: 20px;
    justify-content: center;
  } */
  .card-info {
    font-size: medium;
    color: gray;
    display: flex;
    margin-top: 20px;
    justify-content: center;
  }
  .chat-card:hover {
    background-color: rgb(226, 226, 226);
  }
  .chat-card:focus {
    border: 2px solid #1f1090;
  }
  .bk-svg{
    margin-top: 40%;
  }
</style>